<template>
  <div>
    <!-- 购物车表头 -->
    <el-card class="shoppingheader">
      <div class="goback">
        <i class="el-icon-back"></i>
        <a @click="backprev">返回上一页</a>
      </div>
      <el-row justify="space-between">
        <el-col class :span="20">
          <el-row class="passList_title">
            <img :src="require('../../assets/img/fasco.png')" alt />
            选择差旅目的/Travel Purpose
          </el-row>
          <el-row class="serachreason">
            <el-col :span="1" class="select_travel">
              <i class="el-icon-edit-outline"></i>
            </el-col>
            <el-col :span="6" class="select_travel">
              <el-select v-model="reason" clearable placeholder="选择往返程">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="add_travel_info_btn" :span="4">
          <el-button class="serchorder" type="primary" icon="el-icon-s-promotion"></el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row class="shoppingorder" :gutter="20">
      <el-col v-for="item in bookingInfo" :key="item.$id" :span="6">
        <div :class="['cardinfo']" @click="ischeck($event)">
          <el-row class="passList_title">
            <img :src="require('../../assets/img/fasco.png')" alt />
            乘客信息/Traveler
          </el-row>
          <el-row class="orderInfo">
            <el-col :span="8">姓名/Name:</el-col>
            <el-col :span="16">{{item.FullNameChs}}</el-col>
          </el-row>
          <el-row class="orderInfo">
            <el-col :span="8">证件/ID NO:</el-col>
            <el-col :span="16">{{item.StaffNo | identity}}</el-col>
          </el-row>
          <el-row class="orderInfo final">
            <el-col :span="8">手机/Mobile:</el-col>
            <el-col :span="16">{{item.MobileNo1 |mobile}}</el-col>
          </el-row>
          <el-row class="passList_title">
            <img :src="require('../../assets/img/fasco.png')" alt />
            航班信息/Flight
          </el-row>
          <el-row class="orderInfo">
            <el-col class="airinfo" :span="12">
              <img :src="require(`../../assets/img/${item.bookinginfo.segments[0].aircompany}.png`)" alt />
              <span>{{item.bookinginfo.segments[0].companyname}}{{item.bookinginfo.segments[0].airline}}</span>
            </el-col>
            <el-col class="airinfo" :span="12">
              <i class="el-icon-time"></i>
              <span>{{item.bookinginfo.segments[0].durationF3 |duration}}</span>
            </el-col>
          </el-row>
          <el-row class="orderInfo final">
            <el-col class="airinfotime" :span="6">
              <p>
                {{item.bookinginfo.segments[0].arridate}}
                <br />{{item.bookinginfo.segments[0].deptime |timer}}
              </p>
              <p style="margin-top:20px">
                {{item.bookinginfo.segments[0].depdate}}
                <br />{{item.bookinginfo.segments[0].arritime | timer}}
              </p>
            </el-col>
            <el-col class="airinfo" :span="12">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.timestamp"
                >{{activity.content}}</el-timeline-item>
              </el-timeline>
            </el-col>
          </el-row>
          <el-row class="deleteOrder">
            <a  title="点击删除当前订单" @click.stop>
              <i class="icon--8"></i>
            </a>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      reason: "选项1",
      options: [
        {
          value: "选项1",
          label: "拜访客户/Visiting",
        },
        {
          value: "选项2",
          label: "公务/Business Class",
        },
      ],
      activities: [
        {
          content: "上海虹桥机场",
          timestamp: "ShangHaiHongQiaoAirport",
        },
        {
          content: "北京首都机场",
          timestamp: "ShangHaiHongQiaoAirport",
        },
      ],
      bookingInfo:[]
    };
  },
  created() {
    this.bookingInfo = JSON.parse(sessionStorage.getItem('bookingInfo')) || [];
  },
  methods: {
    // 返回查询结果页面功能
    backprev() {
      this.$router.go(-1);
    },
    // 当前选项卡的选中功能
    ischeck(e) {
      const current = e.currentTarget;
      if (current.classList.contains("isActive")) {
        current.classList.remove("isActive");
      } else {
        current.classList.add("isActive");
      }
    },
  },
};
</script>
<style lang="less" scope>
.shoppingheader {
  margin-bottom: 20px;
  .goback {
    font-size: 14px;
    margin-bottom: 10px;
    a,
    i {
      color: #11539c;
    }
  }
  .serachreason {
    width: 100%;
    margin-top: 10px;
  }
  .serchorder {
    width: 70px;
    height: 70px;
    padding: 8px 16px !important;
    i {
      font-size: 24px;
    }
  }
}
.shoppingorder {
  .passList_title {
    font-size: 18px;
    font-weight: 600;
  }
  .cardinfo {
    background-color: #fff;
    padding: 20px 20px 0 20px;
    border-radius: 4px;
    position: relative;
    .el-row {
      margin-top: 20px;
    }
  }
  .orderInfo {
    margin-left: 30px;
    color: #212121;
    font-size: 18px;
    line-height: 18px;
    .airinfo {
      display: flex;
      align-items: center;
      img {
        width: 18px;
        height: 18px;
      }
      span {
        margin-left: 15px;
      }
    }
    .airinfotime {
      color: #303133;
      font-size: 14px;
    }
  }

  .deleteOrder {
    height: 60px;
    border-top: 1px dotted #979797;
    font-size: 28px;
    color: #979797;
    a {
      width: 100%;
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .isActive {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .isActive:before {
    content: "";
    width: 100%;
    height: 30px;
    background-color: #11539c;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    border-radius: 0px 0px 15px 15px;
  }
}
</style>